<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">
    <title>滑动相册</title>
</head>

<body>
<style>
    body{
        margin:0;
    }

    .film1{
        background:#007aff;
    }

    .film2{
        background:#4bad4b;
    }

    .film3{
        background:#aa4b00;
    }

    .film4{
        background:#e56c0c;
    }

    .film5{
        background:#ffc64b;
    }

    .picbox{
        width:120px;
        height:200px;
        float:left;
        margin:50px 25px;
        transition-duration:0.5s;
    }

    .albumof{
        overflow:hidden;
    }

    .albumbox{
        position:absolute;
    }

    .scalebox{
        width:120px;
        height:200px;
    }

    .clear{
        clear:both;
    }
</style>
<div style="height: 30px;"></div>
<div class="albumof">
    <div class="albumbox" id="albumbox">

        <div class=" picbox">
            <div class="scalebox film1"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film2"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film3"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film4"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film5"></div>
        </div>

        <div class=" picbox">
            <div class="scalebox film1"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film2"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film3"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film4"></div>
        </div>
        <div class=" picbox">
            <div class="scalebox film5"></div>
        </div>

        <div class="clear"></div>
    </div>
</div>

<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script>
    var ow = $(".picbox").outerWidth(true);
    var w = $(".picbox").width();
    var h = $(".picbox").height();
    var count = $(".picbox").length;
    var totallength = ow * count;
    $(".albumbox").width(totallength);
    var albumofw = $(".albumof").width();
    var albleft = ow * 1.5 - albumofw / 2;
    //  var albleft = 0;
    var falbleft = -albleft;
    $(".albumbox").css("-webkit-transform", "translateX(" + falbleft + "px)");
    //触摸移动
    var albumbox = document.getElementById("albumbox");
    var x = 0;
    var x1 = 0;

    var v = 0;
    var ismove = 0;
    albumbox.addEventListener("touchstart", function (event) {
        if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
            x = touch.pageX;
            ismove = 0;
        }
    });

    function scalebox() {
        var cw = w * 2;
        var picboxlist = $(".picbox");
        picboxlist.each(function () {
            var picbox = $(this);
//var picbox = $(".picbox").eq(3);
            var f3x = picbox.offset().left;
            var c = f3x + (w / 2);
            var boxabs = Math.abs(f3x + (w / 2) - (albumofw / 2));
            if (boxabs < cw) {
                var sc = Math.cos(boxabs / cw) * 1.3;
                sc = sc < 1 ? 1 : sc;
                picbox.find(".scalebox").css("-webkit-transform", "scale(" + sc + "," + sc + ")");
            }
        })
    }
    ;
    scalebox();
    albumbox.addEventListener("touchmove", function (event) {
        if (event.targetTouches.length == 1) {
            event.preventDefault(); // 阻止浏览器默认事件，重要
            var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
            nx = touch.pageX;

            x1 = x;
            var offset = nx - x;
            falbleft += offset;
            move(falbleft);
            x = nx;
        }
    });

    function move(falbleft) {
//左端
        if (falbleft > (albumofw / 2 - ow / 2)) {
            v = 0;

            falbleft = (albumofw / 2 - ow / 2);

        }
//右端
        if (falbleft < -(totallength - (albumofw / 2 + ow / 2))) {
            v = 0;
            falbleft = -(totallength - (albumofw / 2 + ow / 2));

        }
        $(".albumbox").css("-webkit-transform", "translateX(" + falbleft + "px)");
        scalebox();
    }
    ;
    //惯性 dt代表阻力
    function slow() {
        if (ismove) {
            var dt = 0.4;
//console.dir(v);
            falbleft += v;
            move(falbleft);
            if (v > 2) {
                v = v - dt;
                setTimeout(function () {
                    slow();
                }, 10);
            } else if (v < -2) {
                v = v + dt;
                setTimeout(function () {
                    slow();
                }, 10);
            }
        }
    }
    ;
    albumbox.addEventListener("touchend", function (event) {
        v = nx - x1;
        ismove = 1;
        setTimeout(function () {
            slow();
        }, 10);
    });
</script>

</body>

</html>